import React, { useEffect, useState } from 'react';
import Header from './Header';
import Content from './Content';
import Left from './Left';
import { IAdminStore } from '@shared/types';
import { useStore } from '@shared/store';
import { Layout } from '@douyinfe/semi-ui';
import NavStore from '@admin/store/NavStore';
import { useHistory, useLocation } from 'react-router-dom';

const routesImporter = () => import('../../routes');

const Main: React.FC = (): JSX.Element | null => {
    const store = useStore<IAdminStore>();

    const location = useLocation();
    const history = useHistory();

    const [ navStore ] = useState<NavStore>(new NavStore(store, history, location));
    const [ ready, setReady ] = useState<boolean>(false);

    useEffect(() => {
        store.keepAlive().then(() => {
            routesImporter().then(mod => {
                navStore.setup(mod.default);
                setReady(true);
            });
        }).catch((err) => {
            // console.error(err);
        });
    }, []);

    useEffect(() => {
        return history.listen((location) => {
            navStore.refreshState(location);
        });
    }, [location]);

    if (!ready) return null;

    return <Layout>
        <Left navStore={navStore} />
        <Layout className="h-screen" >
            <Header navStore={navStore} />
            <Content navStore={navStore} />
            {/* <Layout.Footer
                style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    padding: '20px',
                    color: 'var(--semi-color-text-2)',
                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',
                }}
            >
                <span
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                    }}
                >
                    <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
                </span>
                <span>
                    <span style={{ marginRight: '24px' }}>平台客服</span>
                    <span>反馈建议</span>
                </span>
            </Layout.Footer> */}
        </Layout>
    </Layout>
};

export default Main;
